<template>
  <!--Home页面内容-->
  <div class="my-padded-tb-large">
    <div class="ui container">
      <div class="ui stackable grid">
        <!-- 左边内容 -->
        <div class="eleven wide column animate__animated animate__zoomInLeft">
          <!--banner-->
          <img src="../assets/images/chuyin.gif" width="765" alt="" class="ui rounded image">
          <!--header-->
          <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
              <div class="column">
                <h3 class="ui blue header">博客</h3>
              </div>
              <div class="right aligned column">
                共 <h3 class="ui orange header my-inline-block">&nbsp;{{page.total}}&nbsp;</h3> 篇
              </div>
            </div>
          </div>
          <!--content和分页-->
          <keep-alive>
            <limit-page @getList="getBlogList" :page="page"></limit-page>
          </keep-alive>
        </div>
        <!--右边的列表-->
        <div class="five wide column animate__animated animate__zoomInRight">
          <div class="ui segment" style="text-align:center;padding: 0!important;">
            <img src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/avatar_bg.png" height="125px" width="100%" alt="">
            <div style="margin-top: -55px;">
              <img class="ui circular my-bordered image" style="margin: 0 auto" width="100" src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/avatar.gif">
            </div>
            <p class="my-name">Chenyumeng</p>
            <p class="my-dec">热爱生活 记录所遇 分享所学</p>
            <div style="margin: 20px 0">
              <a href="https://github.com/chen-yumeng" target="_blank" class="ui circular icon button huge"><i class="github icon"></i></a>
              <el-tooltip class="item" effect="dark" placement="bottom">
                <a class="ui circular icon button huge"><i class="weixin icon"></i></a>
                <div slot="content">
                  <img src="../assets/images/weixin.jpg" alt="" style="width: 100px">
                </div>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="2390651024" placement="bottom">
                <a class="ui circular icon button huge" data-content="2390651024"><i class="qq icon"></i></a>
              </el-tooltip>
            </div>
          </div>
          <!--最新推荐-->
          <div class="ui segments">
            <div class="ui secondary segment">
              <i class="icon bookmark"></i>最新推荐
            </div>
            <div class="ui segment" v-for="blog in blogLatestRecommend">
              <a @click="gotoBlog(blog.id)" class="my-black my-text-thin my-cursor-pointer">{{blog.title}}</a>
            </div>
          </div>
          <!--分类-->
          <div class="ui segments">
            <div class="ui secondary segment">
              <div class="ui two column grid">
                <div class="column">
                  <i class="icon th"></i>分类
                </div>
                <div class="column right aligned">
                  <router-link tag="a" to="/types">more <i class="icon angle double right"></i></router-link>
                </div>
              </div>
            </div>
            <div class="ui segment blue">
              <div class="ui fluid vertical menu">
                <a @click="gotoType(type.id)" v-for="type in typeList" class="item">
                  {{type.name}}
                  <div class="ui label blue basic left pointing">{{type.count}}</div>
                </a>
              </div>
            </div>
          </div>
          <!--标签-->
          <div class="ui segments">
            <div class="ui secondary segment">
              <div class="ui two column grid">
                <div class="column">
                  <i class="icon tags"></i>标签
                </div>
                <div class="column right aligned">
                  <router-link tag="a" to="/tags">more <i class="icon angle double right"></i></router-link>
                </div>
              </div>
            </div>
            <div class="ui segment blue">
              <svg :width='width' :height='height'>
                <a style="cursor: pointer!important;" @click="gotoTag(tag.id)" v-for='tag in tags'>
                  <text :x='tag.x' :y='tag.y' :font-size='15 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)'>
                    {{tag.name}}({{tag.count}})
                  </text>
                </a>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import LimitPage from "../components/LimitPage";
  import {getBlogByLimit, getBlogLatestRecommend} from "../api/home";
  export default {
    name: "Home",
    components: {LimitPage},
    data() {
      return {
        page: {},
        tags: [],
        users: this.$store.getters.AllUser,
        typeList: this.$store.getters.AllType,
        tagList: this.$store.getters.AllTag,
        blogLatestRecommend: [],
        width:300,//svg宽度
        height:300,//svg高度
        RADIUS:100,//球的半径
        speedX:Math.PI/360,//球一帧绕x轴旋转的角度
        speedY:Math.PI/360,//球-帧绕y轴旋转的角度
      }
    },
    computed:{
      CX(){
        //球心x坐标
        return this.width/2.5;
      },
      CY(){
        //球心y坐标
        return this.height/2;
      }
    },
    created() {
      this.getBlogList(1)
      this.tags = this.$store.getters.AllTag
      this.getBlogLatestRecommend()
      this.initTag()
    },
    mounted(){
      //使球开始旋转
      setInterval(() => {
        this.rotateX(this.speedX);
        this.rotateY(this.speedY);
      }, 40)
    },
    methods: {
      //初始化标签位置
      initTag() {
        let tags=[];
        for(let i = 0; i < this.tags.length; i++){
          let tag = {};
          let k = -1 + (2 * (i + 1) - 1) / this.tags.length;
          let a = Math.acos(k);
          let b = a * Math.sqrt(this.tags.length * Math.PI)//计算标签相对于球心的角度
          tag.name = this.tags[i].name;
          tag.x = this.CX +  this.RADIUS * Math.sin(a) * Math.cos(b);//根据标签角度求出标签的x,y,z坐标
          tag.y = this.CY +  this.RADIUS * Math.sin(a) * Math.sin(b);
          tag.z = this.RADIUS * Math.cos(a);
          tag.id = this.tags[i].id
          tag.count = this.tags[i].count
          tags.push(tag);
        }
        this.tags = tags;//让vue替我们完成视图更新
      },
      //响应鼠标移动
      tagListener(event){
        var x = event.clientX - this.CX;
        var y = event.clientY - this.CY;
        this.speedX = x*0.0001>0 ? Math.min(this.RADIUS*0.00002, x*0.0001) : Math.max(-this.RADIUS*0.00002, x*0.0001);
        this.speedY = y*0.0001>0 ? Math.min(this.RADIUS*0.00002, y*0.0001) : Math.max(-this.RADIUS*0.00002, y*0.0001);
      },
      rotateX(angleX){
        var cos = Math.cos(angleX);
        var sin = Math.sin(angleX);
        for(let tag of this.tags){
          var y1 = (tag.y- this.CY) * cos - tag.z * sin  + this.CY;
          var z1 = tag.z * cos + (tag.y- this.CY) * sin;
          tag.y = y1;
          tag.z = z1;
        }
      },
      rotateY(angleY){
        var cos = Math.cos(angleY);
        var sin = Math.sin(angleY);
        for(let tag of this.tags){
          var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
          var z1 = tag.z * cos + (tag.x - this.CX) * sin;
          tag.x = x1;
          tag.z = z1;
        }
      },
      // 最新推荐
      getBlogLatestRecommend() {
        getBlogLatestRecommend({start: 0,end:6}).then(res => {
          if (res.code === 200) {
            this.blogLatestRecommend = res.data;
          }
        })
      },
      // 通过分页获取博客
      getBlogList(page) {
        let data = {
          page,
          size: 6
        }
        getBlogByLimit(data).then(res => {
          if (res.code === 200) {
            this.page = res.data
            this.initBlogList()
          }
        })
      },
      initBlogList() {
        // 设置每个博客的用户信息
        this.page.list.forEach(value => {
          this.users.forEach(value1 => {
            if (value.userId === value1.id) {
              value.nickname = value1.nickname
              value.avatar = value1.avatar
            }
          })
        })
        // 设置每个博客的分类信息
        this.page.list.forEach(value => {
          this.typeList.forEach(value1 => {
            if (value.typeId === value1.id) {
              value.type = value1.name
            }
          })
        })
        // 设置每个博客的标签信息
        this.page.list.forEach(value => {
          let arr = []
          this.tagList.forEach(tagValue => {
            value.tagIds.forEach(value1 => {
              if (tagValue.id === value1) {
                arr.push(tagValue.name)
              }
            })
          })
          arr.reverse()
          value.tags = arr
        })
      },

      gotoType(typeId) {
        this.$router.push({name:'Types',params:{typeId:typeId}})
      },
      gotoTag(tagId) {
        this.$router.push({name:'Tags',params:{tagId:tagId}})
      },
      gotoBlog(id) {
        this.$router.push({name:"Blog",params:{blogId:id}})
      }
    },
  }
</script>

<style scoped>
</style>
